<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <#assign path="${springMacroRequestContext.getContextPath()}">
    <link rel="stylesheet" href="${path}/layui/css/layui.css">
    <style>
        .layui-nav-item {
            margin-top: 10px;
        }
        .layui-nav-item p {
            padding: 0 20px;
        }
        .box{
            margin-bottom: 40px;
        }
        .box p {
            margin-top: 40px;
            margin-left: 20px;
        }
    </style>
</head>
    <form class="layui-form" action="" id="ajaxForm">
        <br>
        <br>
        <input name="userId" value="${Session.user.userId}" hidden>
        <div class="layui-form-item">
            <label class="layui-form-label">原密码</label>
            <div class="layui-input-block">
                <input type="password" name="oldPassword" lay-verify="required|pass" autocomplete="off" placeholder="请输入您的原密码" class="layui-input" required style="width: auto;" id="pass1">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input type="password" name="userPassword" lay-verify="required|pass" autocomplete="off" placeholder="请输入您的新密码" class="layui-input" required style="width: auto;" id="pass1">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            </div>
        </div>
    </form>

    <script src="${path}/layui/layui.js"></script>
    <script>
        layui.use('form', function(){
            var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
            var $ = layui.$;
            //自定义验证规则
            form.verify({
                pass:function(value){
                    if(value.length < 6 || value.length > 12){
                        return '密码必须6到12位';
                    }
                }
            });

            form.on('submit(formDemo)', function(data){
                // console.log(data);
                // layer.msg(JSON.stringify(data.field));
                // console.log(JSON.stringify(data.field));
                $.ajax({
                    type: "post",
                    url: "/user/updatePassword",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(data.field),
                    dataType: "json",
                    success: function (data) {
                        if(data.code > 0){
                            layer.msg(data.msg);
                        }else if(data.code == 0){
                            //提醒注册成功，等待2秒后自动关闭弹窗
                            layer.msg(data.msg,{
                                time:2000,
                                end:function () {
                                    //关闭页面，返回首页
                                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                    parent.layer.close(index);
                                }
                            })
                        }
                    }
                });
                return false;
            });
            //但是，如果你的HTML是动态生成的，自动渲染就会失效
            //因此你需要在相应的地方，执行下述方法来进行渲染
            // form.render();
        });
    </script>
</body>
</html>